/*
 * @description: 店铺信息/账号管理
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="shopAccountManage">
        <div class="__wrap">
            <p class="__title">
                账号信息
            </p>
            <div class="__info">
                <div class="__items">
                    <p class="__items_title">
                        用户名：
                    </p>
                    <div class="__items_content">
                        {{ formData.user_name }}
                    </div>
                </div>
                <div class="__items">
                    <p class="__items_title">
                        登录/入驻手机号：
                    </p>
                    <div class="__items_content">
                        {{ formData.phone }}
                    </div>
                    <p
                        class="__change"
                        @click="showPassDialog = true"
                    >
                        更换手机号
                    </p>
                </div>
                <div class="__items">
                    <p class="__items_title">
                        登录密码：
                    </p>
                    <div class="__items_content">
                        {{ formData.pass_word }}
                    </div>
                    <i
                        class="icon-bianji1 iconfont"
                        @click="showDialog = true"
                    />
                </div>
                <div class="__desc">
                    注：此处的用户名、手机号、登录密码和掌上大学APP共用，即此处修改后APP也将修改；
                </div>
            </div>
        </div>

        <!-- 修改密码弹窗 -->
        <change-pass-word
            ref="changePassWord"
            :width="512"
            :title="'修改密码'"
            :dialog="showDialog"
            @close="showDialog = false"
        >
            <div class="__form">
                <div class="__items">
                    <p class="__name">
                        手机号
                    </p>
                    <el-input
                        size="medium"
                        v-model="ruleForm.phone"
                        placeholder="请输入手机号"
                        :style="{width: '212px'}"
                        maxlength="11"
                        show-word-limit
                    />
                    <div
                        class="__code"
                        @click="fnSendBindCode"
                        :style="{pointerEvents: sendCode ? 'none' : ''}"
                    >
                        {{ !sendCode ? sendText : codeTime + 's' }}
                    </div>
                </div>
                <div class="__items">
                    <p class="__name">
                        验证码
                    </p>
                    <el-input
                        size="medium"
                        v-model="ruleForm.code"
                        placeholder="请输入验证码"
                        :style="{width: '320px'}"
                        maxlength="4"
                        show-word-limit
                    />
                </div>
                <div class="__items">
                    <p class="__name">
                        设置新密码
                    </p>
                    <el-input
                        size="medium"
                        v-model="ruleForm.password"
                        placeholder="请输入新的密码"
                        :style="{width: '320px'}"
                    />
                </div>
                <div
                    :style="{opacity: !ruleForm.phone || !ruleForm.code || !ruleForm.password ? '.6' : '1'}"
                    class="__button"
                    @click="handleChangePass()"
                >
                    确认修改
                </div>
            </div>
        </change-pass-word>

        <!-- 更换手机号 验证旧手机号 -->
        <change-pass-word
            ref="changePhoneWord"
            :width="512"
            :title="'更换手机号-验证旧手机号'"
            :dialog="showPassDialog"
            @close="handleCloseOldPhoneDialog"
        >
            <div class="__form">
                <div class="__items">
                    <p class="__name">
                        旧手机号
                    </p>
                    <el-input
                        size="medium"
                        v-model="verfy.old_phone"
                        placeholder="请输入手机号"
                        :style="{width: '212px'}"
                        maxlength="11"
                        show-word-limit
                    />
                    <div
                        @click="fnSendBindCode()"
                        class="__code"
                        :style="{pointerEvents: sendCode ? 'none' : ''}"
                    >
                        {{ !sendCode ? sendText : codeTime + 's' }}
                    </div>
                </div>
                <div class="__items">
                    <p class="__name">
                        验证码
                    </p>
                    <el-input
                        size="medium"
                        v-model="verfy.code"
                        placeholder="请输入验证码"
                        :style="{width: '320px'}"
                        maxlength="4"
                        show-word-limit
                    />
                </div>
                <div
                    :style="{opacity: verfy.old_phone.length == 11 && verfy.code ? 1 : 0.6}"
                    class="__button"
                    @click="handleGetVerfyCode()"
                >
                    下一步
                </div>
            </div>
        </change-pass-word>

        <!-- 更换手机号 设置新手机号 -->
        <change-pass-word
            ref="changeNewPhoneWord"
            :width="512"
            :title="'更换手机号-设置新手机号'"
            :dialog="showNewPhone"
            @close="handleCloseNewPhoneDialog"
        >
            <div class="__form">
                <div class="__items">
                    <p class="__name">
                        新手机号
                    </p>
                    <el-input
                        size="medium"
                        v-model="newVerfy.phone"
                        placeholder="请输入手机号"
                        :style="{width: '212px'}"
                        maxlength="11"
                        show-word-limit
                    />
                    <div
                        @click="fnSendBindCode()"
                        class="__code"
                        :style="{pointerEvents: sendCode ? 'none' : ''}"
                    >
                        {{ !sendCode ? sendText : codeTime + 's' }}
                    </div>
                </div>
                <div class="__items">
                    <p class="__name">
                        验证码
                    </p>
                    <el-input
                        size="medium"
                        v-model="newVerfy.code"
                        placeholder="请输入验证码"
                        :style="{width: '320px'}"
                        maxlength="4"
                        show-word-limit
                    />
                </div>
                <div class="__foot">
                    <div
                        class="__prev"
                        @click="() => {
                            this.showNewPhone = false;
                            this.showPassDialog = true;
                        }"
                    >
                        上一步
                    </div>
                    <div
                        :style="{
                            opacity: newVerfy.phone.length == 11 && newVerfy.code ? 1 : 0.6,
                            width: '120px'
                        }"
                        class="__button"
                        @click="handleConfirmChange()"
                    >
                        确认更换
                    </div>
                </div>
            </div>
        </change-pass-word>
    </div>
</template>

<script>
import changePassWord from '@/components/manage/account/shop-dialog.vue';
export default {
    components: {
        changePassWord
    },
    data () {
        return {
            showNewPhone: false,//新手机号
            showPassDialog: false,//旧手机号
            showDialog: false,//修改密码
            formData: {
                user_name: '我说龙哥你说帅啊',
                phone: '175****2130',
                pass_word: '******'
            },
            ruleForm: {
                phone: '',
                code: '',
                password: ''
            },
            //获取验证码字段
            finance_phone: '',//财务手机号
            sendCode: false,
            computedTime: 'time',
            sendText: '获取验证码',
            codeTime: 10,
            // 旧手机号
            verfy: {
                old_phone: '',
                code: ''
            },
            // 新手机号
            newVerfy: {
                phone: '',
                code: ''
            }
        };
    },
    watch: {
        showDialog (val) {
            if(!val) {
                this.ruleForm = {
                    phone: '',
                    code: '',
                    password: ''
                };
                this.restTimeInfo();
            }
        },
        showPassDialog (val) {
            if(!val) {
                this.restTimeInfo();
            }
        },
        showNewPhone (val) {
            if(!val) {
                this.restTimeInfo();
            }
        }
    },
    mounted () {

    },
    methods: {
        /**
         * @description 修改密码
         */
        handleChangePass () {
            if(!this.ruleForm.phone) {
                this.$notify({
                    title: '警告',
                    message: '请输入手机号码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(this.ruleForm.phone.length !== 11) {
                this.$notify({
                    title: '警告',
                    message: '请输入正确的手机号码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(!this.ruleForm.code) {
                this.$notify({
                    title: '警告',
                    message: '请输入验证码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(!this.ruleForm.password) {
                this.$notify({
                    title: '警告',
                    message: '请输入验证码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            this.showDialog = false;//test

            this.$post('',{
                //
            },resp => {
                if (resp.code == 1) {
                    this.showDialog = false;
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 发送验证码
         */
        fnSendBindCode () {
            this.sendCode = true;
            this.fnCompitedTime();
            this.$post('',{
                type: 102
            },resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '成功',
                        message: '发送成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
        * @description 计时器递归调用
        */
        fnCompitedTime (param) {
            let arr = Array.prototype.slice.call(arguments);

            if(this.codeTime == 10 || arr.length > 0) {
                clearTimeout(this.computedTime);
                this.computedTime = setTimeout(()=>{
                    if(this.codeTime > 0) {
                        this.codeTime--;
                        this.fnCompitedTime(1);
                    } else {
                        this.sendText = '再次发送';
                        this.sendCode = false;
                        this.codeTime = 10;
                        clearTimeout(this.computedTime);
                        return;
                    }
                },1000);
            }
        },

        /**
         * @description 重置信息
         */
        restTimeInfo () {
            this.sendCode = false;
            this.sendText = '获取验证码';
            this.codeTime = 10;
        },

        /**
         * @description 更换手机号-验证旧手机号 --> 下一步
         */
        handleGetVerfyCode () {
            if(!this.verfy.old_phone) {
                this.$notify({
                    title: '警告',
                    message: '请输入手机号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(this.verfy.old_phone.length !== 11) {
                this.$notify({
                    title: '警告',
                    message: '请输入正确的手机号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(!this.verfy.code) {
                this.$notify({
                    title: '警告',
                    message: '请输入验证码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            this.showPassDialog = false;
            this.$nextTick(() => {
                this.showNewPhone = true;
            });
        },

        /**
         * @description 关闭旧手机号弹窗
         */
        handleCloseOldPhoneDialog () {
            this.showPassDialog = false;
            this.verfy = {
                old_phone: '',
                code: ''
            };
        },

        /**
         * @description 关闭新手机号弹窗
         */
        handleCloseNewPhoneDialog () {
            this.showNewPhone = false;
            this.newVerfy = {
                phone: '',
                code: ''
            };
        },

        /**
         * @description 确认更换
         */
        handleConfirmChange () {
            if(!this.newVerfy.phone) {
                this.$notify({
                    title: '警告',
                    message: '请输入手机号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(this.newVerfy.phone.length !== 11) {
                this.$notify({
                    title: '警告',
                    message: '请输入正确的手机号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(!this.newVerfy.code) {
                this.$notify({
                    title: '警告',
                    message: '请输入验证码',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            console.log('----code----', this.verfy, this.newVerfy);

            this.showNewPhone = false;//test

            this.$post('',{
                //
            },resp => {
                if (resp.code == 1) {
                    this.showNewPhone = false;
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.shopAccountManage {
    .__wrap {
        width: calc(100% - 48px);
        margin-left: 24px;
        border: 1px rgba(238, 238, 238, 1) solid;
        background: rgba(251, 251, 251, 1);
        border-radius: 4px;
        box-sizing: border-box;
        padding: 12px 32px;
        .__title {
            width: 100%;
            height: 46px;
            line-height: 46px;
            border-bottom: 1px rgba(240, 242, 245, 1) solid;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
        }
        .__info {
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-top: 25px;
            .__items {
                display: flex;
                align-items: center;
                margin-bottom: 25px;
                box-sizing: border-box;
                padding-left: 52px;
            }
            .__items_title {
                width: 120px;
                text-align: right;
                color: rgba(136, 136, 136, 1);
                font-size: 14px;
                margin-right: 24px;
            }
            .__items_content {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                width: 221px;
            }
            .__change {
                color: rgba(24, 144, 255, 1);
                font-size: 14px;
                cursor: pointer;
            }
            .iconfont {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                margin-left: 29px;
            }
            .__desc {
                color: rgba(136, 136, 136, 1);
                font-size: 14px;
                margin-top: 7px;
                margin-left: 103px;
            }
        }
    }
    .__form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        .__items {
            display: flex;
            align-items: center;
            margin-top: 24px;
            width: 100%;
            box-sizing: border-box;
            padding-left: 32px;
            .__name {
                width: 80px;
                text-align: right;
                color: rgba(102, 102, 102, 1);
                font-size: 16px;
                letter-spacing: 0;
                margin-right: 16px;
            }
            .__code {
                width: 92px;
                height: 36px;
                border-radius: 4px;
                border: 1px rgba(32, 160, 255, 1) solid;
                text-align: center;
                line-height: 36px;
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                margin-left: 16px;
            }
        }
        .__button {
            width: 200px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-radius: 18px;
            background: rgba(32, 160, 255, 1);
            color: #fff;
            margin: 32px 0;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
        }
    }
    .__foot {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .__prev {
            width: 120px;
            height: 36px;
            border-radius: 18px;
            border: 1px rgba(216, 216, 216, 1) solid;
            text-align: center;
            line-height: 36px;
            margin-right: 32px;
            color: rgba(96, 105, 114, 1);
            font-size: 14px;
            cursor: pointer;
        }
    }
}
</style>